<template>
  <view class="components-home commonDiv">
    <u-navbar
      leftText=""
      leftIcon=''
      title="首页"
      :safeAreaInsetTop="true"
      >
        <view
          class="u-nav-slot"
          slot="right"
          @click="backTo"
        >
        <view class="icon iconfont icon-logout" style="font-weight: 600;font-size: 20px;"></view>
      </view>
    </u-navbar>
    <view class="title-header">
      <view class="title-text">请选择项目点</view>
    </view>

    <view class="nav-list margin-top">
      <navigator
        open-type="navigate"
        hover-class="none"
        :url="item.title"
        :class="'nav-li bg-kuxuan' + (index+1)"
        v-for="(item, index) in kuxuan"
        :key="index"
      >
        <view class="nav-name">{{item.name}}</view>
      </navigator>
    </view>
    <u-modal @confirm="logOutHandle" @cancel="cancelHandle" width="450px" :show="showLogOut" title="" :showConfirmButton="true" :showCancelButton="true" confirmColor="#00796B">
      <view class="slot-content1">
				<view class="title">退出</view>
				<view>请确认是否退出？</view>
			</view>
    </u-modal>
    <quick-message ref="message"></quick-message>
  </view>
</template>

<script>
export default {
  name: "Components",
  data() {
    return {
      showLogOut: false,
      kuxuan: [
        {
          title: "/pages/home/first/index",
          name: "第一项：基本信息",
          color: ""
        },
        {
          title: "/pages/home/second/index",
          name: "第二项：体态筛查1",
          color: ""
        },
        {
          title: "/pages/home/third/index",
          name: "第三项：体态筛查2",
          color: ""
        },
        {
          title: "/pages/home/forth/index",
          name: "第四项：异常记录",
          color: ""
        },
        {
          title: "/pages/home/allStudent/index",
          name: "学生列表查询",
          color: ""
        }
      ]
    };
  },
  methods: {
    tap() {
      uni.navigateTo({
        url: "/pages/example/components"
      });
    },
    backTo(){
      this.showLogOut = true
    },
    logOutHandle(){
      this.showLogOut = false
      uni.clearStorage()
      this.$refs.message.show({
            type:'success', //String 默认default
            msg:'退出成功！', //String 显示内容 *
            direction:'top', //String 默认顶部显示
            icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
            mask:true, //Boolean 遮罩（默认false没有遮罩）
            time:2000, //Number|Boolean 默认3000/false为不自动关闭
            customStyle:{ //自定义样式
              // color:'#FFFFFF', //字体图标色
              // backgroundColor:'rgba(0,0,0,.5)', //背景色
              fontSize: 12,
            }, 
            iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
            iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
          })
          setTimeout(() => {
            uni.reLaunch({ 
              url: '/pages/login/login'
            });
          }, 1000);
    },
    cancelHandle(){
      this.showLogOut = false
    }
  }
};
</script>

<style lang="scss">
.components-home{
    height: calc(100vh - 100px );
    padding: 80px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: url('@/static/img/bg.png') no-repeat;
    background-position-y: 2%;
    background-size: 100% auto;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 40upx 0px;
  justify-content: center;
}

.nav-li {
  padding: 30upx;
  border-radius: 12upx;
  width: 45%;
  margin: 0 2.5% 40upx;
  background-image: url('@/static/img/nav-bg.png');
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
}

.nav-li::after {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: inherit;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: -10%;
  border-radius: 10upx;
  opacity: 0.2;
  transform: scale(0.9, 0.9);
}

.nav-li.cur {
  color: #fff;
  background: rgb(94, 185, 94);
  box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
}

.nav-name {
  font-size: 28upx;
  text-transform: Capitalize;
  margin-top: 20upx;
  position: relative;
}

.nav-name::before {
  content: "";
  position: absolute;
  display: block;
  width: 40upx;
  height: 6upx;
  background: #fff;
  bottom: 0;
  right: 0;
  opacity: 0.5;
}

.nav-name::after {
  content: "";
  position: absolute;
  display: block;
  width: 100upx;
  height: 1px;
  background: #fff;
  bottom: 0;
  right: 40upx;
  opacity: 0.3;
}

.nav-name::first-letter {
  font-weight: bold;
  font-size: 36upx;
  margin-right: 1px;
}

.title-header {
  display: flex;
  height: 120rpx;
  font-size: 40rpx;
  padding-bottom: 40rpx;
  align-items: center;
  justify-content: center;
  /* padding: 40rpx 0 0 0; */
  font-weight: bold;
}
.title-text {
  background-image: -webkit-linear-gradient(60deg, $u-primary, $u-success);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bg-kuxuan1 {
  background-color: #2196F3;
  color: #fff;
}

.bg-kuxuan2 {
  background-color: #1565C0;
  color: #fff;
}

.bg-kuxuan3 {
  background-color: #00897B;
  color: #fff;
}

.bg-kuxuan4 {
  background-color: #3F51B5;
  color: #fff;
}
.bg-kuxuan5 {
  background-color: #3fa7b5;
  color: #fff;
}
.slot-content1{
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .title{
    font-size: 24px;
    font-weight: 600;
    padding-bottom: 16px;
  }
}
</style>
